<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
<Card>
  <Form action="" method="get" name="exportData" id="exportData" enctype="multipart/form-data">
    <Card>
      <header>
        <Row>
          <span>代付日期(起):</span>
          <Date-picker type="date" placeholder="" style="width: 150px" v-model="listQueryCondition.payBeginDate" name="payBeginDate" value="yyyy-MM-dd"></Date-picker>
          <span>-</span>
          <span>代付日期(止):</span>
          <Date-picker type="date" placeholder="" style="width: 150px" v-model="listQueryCondition.payEndDate" name="payEndDate" value="yyyy-MM-dd"></Date-picker>
          <span style="width: 200px;margin-left: 20px;" >放款申请时间(起):</span>
          <Date-picker type="date" placeholder="" style="width: 150px" v-model="listQueryCondition.applyBeginDate" name="applyBeginDate" value="yyyy-MM-dd"></Date-picker>
          <span>-</span>
          <span style="width: 200px;margin-left: 20px;">放款申请时间(止):</span>
          <Date-picker type="date" placeholder="" style="width: 150px" v-model="listQueryCondition.applyEndDate" name="applyEndDate" value="yyyy-MM-dd"></Date-picker>
          <span style="width: 200px;margin-left: 20px;">付款状态:</span>
          <Select style="width:150px" placeholder="付款状态" v-model="listQueryCondition.lendProcessStatus" name="lendProcessStatus">
                <Option v-for="item in paymentStatusList" :value="item.status" :key="item.status">{{ item.statusName }}</Option>
          </Select>
          <span style="width: 200px;margin-left: 20px;">姓名:</span>
          <Input placeholder="姓名" style="width: 150px" v-model="listQueryCondition.custName" name="custName" />
        </Row>
        <br/>
        <Row>
          <span>放款时间(起):</span>
          <Date-picker type="date" placeholder="" style="width: 150px" v-model="listQueryCondition.lendBeginDate" name="lendBeginDate" value="yyyy-MM-dd"></Date-picker>
          <span>-</span>
          <span>放款时间(止):</span>
          <Date-picker type="date" placeholder="" style="width: 150px" v-model="listQueryCondition.lendEndDate" name="lendEndDate" value="yyyy-MM-dd"></Date-picker>
          <span style="width: 200px;margin-left: 20px;">资金方:</span>
          <Select style="width:150px" placeholder="资金方" v-model="listQueryCondition.fundSourceCode" name="fundSourceCode">
                            <Option v-for="item in fundList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName }}</Option>
                        </Select>
          <span style="width: 200px;margin-left: 20px;">产品:</span>
          <Select style="width:150px" placeholder="产品" v-model="listQueryCondition.productCode" name="productCode">
                            <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{ item.productTypeName}}</Option>
                        </Select>
          <Button type="primary" @click="listQuery"  style="margin-left: 20px;">查询</Button>
          <Button type="primary" @click="exportExcel" style="margin-left: 10px;">excel下载</Button>
        </Row>
        <input type="hidden" name="pageNum" id="pageNum" value="" />
        <input type="hidden" name="pageSize" id="pageSize" value="" />
                </header>
    </Card>
  </Form>
  <Card>
    <Row type="flex" justify="center" align="middle" class="list-query">
      <Table border :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
    </Row>
    <div class="bottom-page-div">
      <Page :total="listQueryCondition.total" :current="listQueryCondition.pageNum" :page-size="listQueryCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
    </div>
  </Card>
  <Modal v-model="modal1" title="出账否决" @on-ok="ok" @on-cancel="cancel">
    <Form ref="dataForm" :model="listQueryCondition" :rules="dataRules" :label-width="250">
      <FormItem label="否决原因" prop="rejectReason">
        <Input v-model="listQueryCondition.rejectReason" style="width:180px" />
                </FormItem>
    </Form>
  </Modal>
  <Modal v-model="modal2" title="更换资金源操作" @on-ok="okChangeFundSource" @on-cancel="cancelChangeFundSource">
    <Form :model="changeFundInfo" style="margin-left:140px">
      <FormItem prop="contractAccount" label="客户名称:">
        <Input v-model="changeFundInfo.custName" style="width: 150px" />
                </FormItem>
        <FormItem prop="contractAccount" label="身份证号:">
          <Input v-model="changeFundInfo.custCardNo" style="width:180px" />
                </FormItem>
          <FormItem prop="contractAccount" label="银行卡号:">
            <Input v-model="changeFundInfo.bankCard" style="width:180px" />
                </FormItem>
            <FormItem prop="contractAccount" label="产品:">
              <Input v-model="changeFundInfo.productTypeName" style="width:180px" />
                </FormItem>
              <FormItem prop="contractAccount" label="贷款金额:">
                <Input v-model="changeFundInfo.principalAmtAct" style="width:180px" />
                </FormItem>
                <FormItem prop="contractAccount" label="期限:">
                  <Input v-model="changeFundInfo.period" style="width:180px" />
                </FormItem>
                  <FormItem prop="contractAccount" label="资金方:">
                    <Select style="width:150px"  v-model="changeFundInfo.fundCode" name="productCode">
                        <Option v-for="item in fundChangeList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName}}</Option>
                    </Select>
                  </FormItem>
    </Form>
  </Modal>
</Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      modal1: false,
      modal2: false,
      changeFundInfo: {
        custName: '',
        custCardNo: '',
        bankCard: '',
        productTypeName: '',
        productType: '',
        principalAmtAct: '',
        period: '',
        fundCode: '',
        loanId: ''
      },
      fundList: [],
      listQueryCondition: {
        productCode: '',
        fundSourceCode: '',
        lendProcessStatus: '',
        custName: '',
        payBeginDate: '',
        payEndDate: '',
        applyBeginDate: '',
        applyEndDate: '',
        lendBeginDate: '',
        lendEndDate: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        rejectReason: '', // 否决原因
        singleLoanId: '' // 单个loanId
      },
      dataRules: {
        rejectReason: [{
          required: true,
          message: '否决原因不能为空',
          trigger: 'blur'
        }]
      },
      flag: '', // 操作出账否决标志  1有权限
      productList: [],
      fundChangeList: [],
      paymentStatusList: [],
      orderColumns: [{
        type: 'index',
        title: '序号',
        width: 100,
        fixed: 'left'
      },
      {
        title: '姓名',
        key: 'custName',
        width: 100,
        align: 'center',
        fixed: 'left'
      },
      {
        title: '身份证号',
        width: 170,
        key: 'custCardNo'
      },
      {
        title: '贷款编号',
        key: 'loanId',
        width: 170,
        align: 'center'
      },
      {
        title: '银行卡号',
        key: 'receiveAcctNo',
        width: 170,
        align: 'center'
      },
      {
        title: '开户行',
        key: 'receiveBankName',
        width: 170,
        align: 'center'
      },
      {
        title: '产品',
        width: 100,
        key: 'productTypeName',
        align: 'center'
      },
      {
        title: '金额',
        key: 'principalAmtAct',
        width: 100,
        align: 'center'
      },
      {
        title: '咨询费',
        key: 'consultingFee',
        width: 100,
        align: 'center'
      },
      {
        title: '期限',
        width: 100,
        key: 'terms',
        align: 'center'
      },
      {
        title: '审核时间',
        key: 'passTime',
        width: 200,
        align: 'center',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.$util.loanModularFormatTime(params.row.passTime))
          ])
        }
      },
      {
        title: '申请时间',
        key: 'loanTime',
        width: 200,
        align: 'center',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.$util.loanModularFormatTime(params.row.loanTime))
          ])
        }
      },
      {
        title: '放款时间',
        width: 200,
        key: 'fundReturnTime',
        align: 'center',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.$util.loanModularFormatTime(params.row.fundReturnTime))
          ])
        }
      },
      {
        title: '申请人',
        key: 'createdBy',
        width: 100,
        align: 'center'
      },
      {
        title: '资金方',
        key: 'fundName',
        width: 200,
        align: 'center'
      },
      {
        title: '渠道',
        key: 'channelName',
        width: 100,
        align: 'center'
      },
      {
        title: '状态',
        key: 'status',
        width: 100,
        align: 'center',
        render: (h, params) => {
          if (params.row.status === 'F0') {
            return h('div', [
              h('span', '申请')
            ])
          }
          if (params.row.status === 'F1') {
            return h('div', [
              h('span', '拒绝')
            ])
          }
          if (params.row.status === 'F2') {
            return h('div', [
              h('span', '代付成功')
            ])
          }
          if (params.row.status === 'F3') {
            return h('div', [
              h('span', '代付失败')
            ])
          }
          if (params.row.status === 'F3') {
            return h('div', [
              h('span', '代付失败')
            ])
          }
          if (params.row.status === 'F3') {
            return h('div', [
              h('span', '代付失败')
            ])
          }
          if (params.row.status === 'F4') {
            return h('div', [
              h('span', '手动付款成功')
            ])
          }
          if (params.row.status === 'F5') {
            return h('div', [
              h('span', '非代付审批通过')
            ])
          }
          if (params.row.status === 'F6') {
            return h('div', [
              h('span', '取消')
            ])
          }
          if (params.row.status === 'F7') {
            return h('div', [
              h('span', '支付中')
            ])
          }
          if (params.row.status === 'F10') {
            return h('div', [
              h('span', '处理中')
            ])
          }
          if (params.row.status === 'F11') {
            return h('div', [
              h('span', '更换资金源')
            ])
          }
          if (params.row.status === '15') {
            return h('div', [
              h('span', '出账否决')
            ])
          }
        }
      },
      {
        title: '详细信息',
        width: 200,
        key: 'msg',
        align: 'center'
      },
      {
        title: '服务费代扣状态',
        key: 'consultingFeeStatus',
        width: 200,
        align: 'center',
        render: (h, params) => {
          if (params.row.consultingFeeStatus === 'S0') {
            return h('div', [
              h('span', '代扣初始化')
            ])
          }
          if (params.row.consultingFeeStatus === 'S1') {
            return h('div', [
              h('span', '代扣成功')
            ])
          }
          if (params.row.consultingFeeStatus === 'S2') {
            return h('div', [
              h('span', '处理中')
            ])
          }
          if (params.row.consultingFeeStatus === 'S3') {
            return h('div', [
              h('span', '代扣失败')
            ])
          }
        }
      },
      {
        title: '服务费订单编号',
        key: 'consultingFeeOrderNumber',
        width: 200,
        align: 'center'
      },
      {
        title: '操作',
        align: 'center',
        width: 200,
        fixed: 'right',
        render: function (h, params) {
          const vm = this
          return h('div', {}, [
            (params.row.status === 'F3' && !(params.row.fundSource === 7 || params.row.fundSource === 8)) && h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                fontSize: '12px'
              },
              on: {
                click: () => {
                  this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/loanPayment', params.row.loanId).then(re => {
                    var data = re.data
                    var message = data.message
                    this.$Message.warning(message)
                    vm.listQuery()
                  }).catch(er => {

                  })
                }

              }
            }, '放款'),
            (params.row.status === 'F2' || params.row.status === 'F4') && (params.row.fundOrderId === '' || params.row.fundOrderId === null) && (params.row.fundSource === 7 || params.row.fundSource === 8) && h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                fontSize: '12px',
                marginLeft: '5px'
              },
              on: {
                click: () => {
                  this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/reissuedOrder', params.row.loanId).then(re => {
                    var data = re.data
                    var message = data.message
                    this.$Message.warning(message)
                    vm.listQuery()
                  }).catch(er => {

                  })
                }
              }
            }, ' 重发订单'),
            (params.row.status === 'F10' && params.row.fundSource !== 14) && h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                fontSize: '12px',
                marginLeft: '5px'
              },
              on: {
                click: () => {
                  this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/checkStatus', params.row.loanId).then(re => {
                    var data = re.data
                    var message = data.message
                    this.$Message.warning(message)
                    vm.listQuery()
                  }).catch(er => {

                  })
                }
              }
            }, '校验状态'),
            // 线下产品才能做资金源更换
            ((params.row.status === 'F3' || params.row.status === 'F0') && params.row.patternCode === 'B') && h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                fontSize: '12px',
                marginLeft: '5px'
              },
              on: {
                click: () => {
                  this.changeFundInfo.custName = params.row.custName
                  this.changeFundInfo.custCardNo = params.row.custCardNo
                  this.changeFundInfo.bankCard = params.row.receiveAcctNo
                  this.changeFundInfo.productTypeName = params.row.productTypeName
                  this.changeFundInfo.principalAmtAct = params.row.principalAmtAct
                  this.changeFundInfo.period = params.row.terms
                  this.changeFundInfo.loanId = params.row.loanId
                  // 请求更换资金源接口
                  var requestData = {
                    singleLoanId: params.row.loanId
                  }
                  this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/changeFundList', requestData).then(re => {
                    var data = re.data
                    var message = data.message
                    if (data.code === 'fail') {
                      this.$Message.warning(message)
                      return
                    }
                    vm.fundChangeList = data.data
                    this.modal2 = true
                  }).catch(er => {

                  })
                }
              }
            }, '更换资金源'), (params.row.status === 'F3' && this.flag === '1') && h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                fontSize: '12px',
                marginLeft: '5px'
              },
              on: {
                click: () => {
                  this.modal1 = true
                  this.listQueryCondition.singleLoanId = params.row.loanId
                }
              }

            }, '出账否决')
          ])
        }.bind(this)
      }
      ],
      orderData: []

    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.screenConditon()
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    ok () {
      var vm = this
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/accountVeto', params.row.loanId).then(re => {
            var data = re.data
            var message = data.message
            this.$Message.warning(message)
            vm.listQuery()
          }).catch(er => {

          })
        }
      })
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    okChangeFundSource () {
      var vm = this
      var requestData = {
        fundSourceCode: vm.changeFundInfo.fundCode,
        singleLoanId: vm.changeFundInfo.loanId
      }
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/replaceFundResource', requestData).then(re => {
        var data = re.data
        var message = data.message
        this.$Message.warning(message)
        vm.listQuery()
      }).catch(er => {

      })
    },
    cancelChangeFundSource () {
      this.$Message.info('Clicked cancel')
    },
    // 筛选条件展示
    screenConditon () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/listScreenCondition').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.fundList.push({
          fundCode: '',
          fundName: '请选择'
        })
        var fundLength = 0
        for (; fundLength < data.data.fundList.length; fundLength++) {
          vm.fundList.push(data.data.fundList[fundLength])
        }
        vm.productList.push({
          productType: '',
          productTypeName: '请选择'
        })
        var productLength = 0
        for (; productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
        vm.paymentStatusList.push({
          status: '',
          statusName: '请选择'
        })
        for (var paymentStatusLength = 0; paymentStatusLength < data.data.loanQueryPaymentStatus.length; paymentStatusLength++) {
          vm.paymentStatusList.push(data.data.loanQueryPaymentStatus[paymentStatusLength])
        }
      }).catch(er => {

      })
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.listQueryCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.listQueryCondition.pageSize = pageLength
      vm.listQuery()
    },
    exportExcel () {
      document.getElementById('exportData').action = this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/downLoad'
      document.getElementById('pageNum').value = this.listQueryCondition.pageNum
      document.getElementById('pageSize').value = this.listQueryCondition.pageSize
      document.getElementById('exportData').submit()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanQuery/service/loanQueryList', this.listQueryCondition).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        // console.info(data.data.list)
        vm.applyingData = data.data.applyingList
        vm.listQueryCondition.total = data.data.total
        vm.orderData = data.data.list
        vm.flag = data.data.flag
      }).catch(er => {

      })
    }

  }
}
</script>
<style>
.i-icon {
  float: left;
  margin-left: 20px;
}
.loan-query-top-div {
  margin-top: 30px;
}

.left-div {
  width: 150px;
  float: left;
}

.common-div {
  width: 150px;
  float: left;
  margin-left: 13px;
}

.i-icon {
  float: left;
  margin-left: 20px;
}

.query-button {
  width: 150px;
  float: left;
  text-align: center;
}

.pass-button {
  margin-left: 13px;
}

.button-div {
  margin-top: 154px;
  text-align: center;
}
.bottom-page-div {
  margin-top: 120px;
  text-align: center;
}
.refuse-button {
  margin-left: 13px;
  background-color: rgba(25, 190, 107, 0.68);
}
.cancle-loan-button {
  margin-left: 13px;
  background-color: rgba(255, 153, 0, 0.81);
}
.audit-div {
  margin-top: 100px;
  text-align: center;
  float: left;
}
</style>
